﻿body {
    margin:0;
    font-family:sans-serif,Arial;
    font-size:12px;
}
#banner {
    width: 960px;
    height: 300px;
    background-image: url('../img/main1.jpg');
    margin:0 auto;
  
}


/*style for menu bar*/
/* Reset */
.menu,
.menu ul,
.menu li,
.menu a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

/* Menu */
.menu {	
	height: 40px;
	width:960px;

	background: #f3f3f3;
	background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

	/*-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;*/
}

.menu li {
	position: relative;
	list-style: none;
	float: left;
	display: block;
	height: 40px;
}

/* Links */

.menu li a {
	display: block;
	padding: 0 14px;
	margin: 6px 0;
	line-height: 28px;
	text-decoration: none;
	
	border-left: 1px solid #393942;
	border-right: 1px solid #4f5058;

	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 13px;

	color: #f3f3f3;
	text-shadow: 1px 1px 1px rgba(0,0,0,.6);

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover > a { color: #8fde62; }

/* Sub Menu */

.menu ul {
	position: absolute;
	top: 40px;
	left: 0;

	opacity: 0;
	
	background: #1f2024;

	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;

	-webkit-transition: opacity .25s ease .1s;
	-moz-transition: opacity .25s ease .1s;
	-o-transition: opacity .25s ease .1s;
	-ms-transition: opacity .25s ease .1s;
	transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
	height: 0;
	overflow: hidden;
	padding: 0;

	-webkit-transition: height .25s ease .1s;
	-moz-transition: height .25s ease .1s;
	-o-transition: height .25s ease .1s;
	-ms-transition: height .25s ease .1s;
	transition: height .25s ease .1s;
}

.menu li:hover > ul li {
	height: 36px;
	overflow: visible;
	padding: 0;
}

.menu ul li a {
	width: 100px;
	padding: 4px 0 4px 40px;
	margin: 0;

	border: none;
	border-bottom: 1px solid #353539;
}

.menu ul li:last-child a { border: none; }

/* Icons */

.menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }
/*style for menu bar*/

#wrapper {
    width:960px;
    margin:0 auto;
   
    
}
#topbar {
    width:960px;
    margin:0 auto;
}
#left {
    width:300px;
    min-height:300px;
    float:left;
    background-color:#28292a;
}
#right {
    width:660px;
   
    float:left;
    
}
.clear {
clear:both;
}
#footer {
    width:960px;
    line-height:40px;
    text-align:center;
    font-weight:bold;
    color:white;
    background-color:#353539;
}

/*search box*/
#top{
    width:260px;
    line-height:50px;
   background-color:#555050;
   color:white;
   margin-top:30px;
   border-radius:5px;
   margin-left:20px;
}
#txtSearch {
    margin-left:10px;
    border-radius:5px;
    border:none;
    color:#c7c6c6;
    height:22px;
    font-size:10px;
    width:170px;
    outline:none;

}
  
     #btnSearch   {
        
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
        background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
        background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
        background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
        background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
        background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
        
        background-color:#768d87;
        
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        
        display:inline-block;
        color:#ffffff;
        font-family:Trebuchet MS;
        font-size:11px;
        font-weight:bold;
        padding:6px 10px;
        text-decoration:none;
        border:none;
        text-shadow:0px -1px 0px #2b665e;
        outline:none;
        
    }
     #btnSearch :hover {
        
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #768d87));
        background:-moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
        background:-webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
        background:-o-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
        background:-ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
        background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87',GradientType=0);
        
        background-color:#6c7c7c;
    }
     #btnSearch:active {
        position:relative;
        top:1px;
    }

#cart {
   width:260px;
    
   background-color:#555050;
   color:white;
   margin-top:20px;
   border-radius:5px;
   margin-left:20px;
  
}

    #cart p, a {
        margin-left: 20px;
    }
    #cart h3 {
        margin:0;
        padding:0;
        width:260px;
        text-align:center;
        background-color:#393942;
        border-radius:5px 5px 0 0;
        line-height:40px;
    }

    #category {
   width:260px;
    
   background-color:#555050;
   color:white;
   margin-top:20px;
   margin-bottom:20px;
   border-radius:5px;
   margin-left:20px;
  
}

     #category h3 {
        margin:20px 0 0 0;
        padding:0;
        width:260px;
        text-align:center;
        background-color:#393942;
        border-radius:5px 5px 0 0;
        line-height:40px;
    }

        #category ul {
            
           
            margin:0;
            padding:0;
        }

        #category ul li {
        
            margin-left:20px;
            margin-right:20px;
           list-style-type:none;
           line-height:30px;
           border-bottom:thin solid whitesmoke;
          
        }
         #category ul li a{
        
            text-decoration:none;
            color:wheat;
            margin:0;
        }
          #category ul li a:hover{
        
           
           font-weight:bold;
        }

.pro {
width:210px;
min-height:330px;
border:thin solid wheat;
 margin:10px 3px 10px 3px;
 float:left;
 text-align:center;
 color:rgba(0,0,0,.6);
}
    .pro span img {
        text-align:center;
        display:block;
        margin:auto;
    }


   
.order {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-webkit-border-top-left-radius:8px;
	-moz-border-radius-topleft:8px;
	border-top-left-radius:8px;
	-webkit-border-top-right-radius:8px;
	-moz-border-radius-topright:8px;
	border-top-right-radius:8px;
	-webkit-border-bottom-right-radius:8px;
	-moz-border-radius-bottomright:8px;
	border-bottom-right-radius:8px;
	-webkit-border-bottom-left-radius:8px;
	-moz-border-radius-bottomleft:8px;
	border-bottom-left-radius:8px;
	text-indent:0px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:12px;
	font-weight:bold;
	font-style:normal;
	height:24px;
	line-height:24px;
	width:54px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ffffff;
    outline:none;
}
.order:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
    outline:none;
}.order:active {
	position:relative;
	top:1px;
    outline:none;
}

#cart a {
    text-decoration:none;
    color:wheat;
    font-weight:bold;
}

#cart a:hover {
    text-decoration:underline;
    
}